
.no-area{position:absolute;width:0;height:0}


.outlinedA{color:hsl(200,75%,35%);text-shadow:0 0 1px currentColor,
-1px -1px 1px hsl(200,75%,45%),
0 -1px 1px hsl(200,75%,40%),
-1px 0 1px hsl(200,75%,35%),
1px -1px 1px hsl(200,75%,35%),
1px 0 1px hsl(200,75%,30%),
1px 1px 1px hsl(200,75%,30%),
0 1px 1px hsl(200,75%,30%),
-1px 1px 1px hsl(200,75%,30%),

-2px -2px 1px hsl(200,75%,75%),
-2px -1px 1px hsl(200,75%,60%),
-2px 0 1px hsl(200,75%,60%),
-1px -2px 1px hsl(200,75%,50%),
0 -2px 1px hsl(200,75%,50%),
1px -2px 1px hsl(200,75%,50%),
2px -2px 1px hsl(200,75%,35%),
2px -1px 1px hsl(200,75%,35%),
2px 0 1px hsl(200,75%,30%),
2px 1px 1px hsl(200,75%,10%),
2px 2px 1px hsl(200,75%,10%),
1px 2px 1px hsl(200,75%,15%),
0 2px 1px hsl(200,75%,10%),
-1px 2px 1px hsl(200,75%,20%),
-2px 2px 1px hsl(200,75%,20%),
-2px 1px 1px hsl(200,75%,10%),

-3px -3px 1px #006,
-2px -3px 1px #006,
-1px -3px 1px #006,
0 -3px 1px #006,
1px -3px 1px #006,
2px -3px 1px #006,
3px -3px 1px #006,
3px -2px 1px #006,
3px -1px 1px #006,
3px 0 1px #006,
3px 1px 1px #006,
3px 2px 1px #006,
3px 3px 2px #006,
2px 3px 1px #006,
1px 3px 1px #006,
0 3px 1px #006,
-1px 3px 1px #006,
-2px 3px 1px #006,
-3px 3px 1px #006,
-3px 2px 1px #006,
-3px 1px 1px #006,
-3px 0 1px #006,
-3px -1px 1px #006,
-3px -2px 1px #006
}
.outlinedA:before{content:'OutlinedA';top:-4px;margin-left:-4px;color:transparent;text-shadow:1px 1px 3px hsl(200,75%,75%);opacity:.4}
.mid:after{content:'OutlinedA';color:#000;opacity:.5;text-shadow:0 0 1px currentColor}

.outlinedB{color:hsl(10,100%,40%);text-shadow:0 0 2px currentColor,
0 -1px 1px hsl(40,100%,80%),
-1px -1px 1px hsl(10,100%,40%),
1px -1px 1px hsl(10,100%,40%),
1px 0 1px hsl(10,100%,40%),
0 -1px 1px hsl(10,100%,40%),
0 1px 1px hsl(10,100%,20%),
1px 1px 1px hsl(10,100%,40%),
-1px 1px 1px hsl(10,100%,40%),

-2px -2px 1px hsl(10,100%,20%),
-1px -2px 1px hsl(10,100%,20%),
0 -2px 1px hsl(10,100%,20%),
1px -2px 1px hsl(10,100%,20%),
2px -2px 1px hsl(10,100%,20%),
2px -1px 1px hsl(10,100%,20%),
2px 0 1px hsl(10,100%,20%),
2px 1px 1px hsl(10,100%,20%),
2px 2px 1px hsl(10,100%,20%),
1px 2px 1px hsl(10,100%,20%),
0 2px 3px hsl(10,100%,20%),
-1px 2px 1px hsl(10,100%,20%),
-2px 2px 1px hsl(10,100%,20%),
-2px 1px 1px hsl(10,100%,20%),
-2px 0 1px hsl(10,100%,20%),
-2px -1px 1px hsl(10,100%,20%)
}
.outlinedB:before{content:'OutlinedB';top:-3px;color:transparent;text-shadow:0 1px 2px #ff6;opacity:.4}
.outlinedB:after{content:'OutlinedB';top:.3em;color:transparent;text-shadow:0 0 6px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.8);transform:scaleY(.5);z-index:-1}

.hsl{color:hsl(184,80%,25%);text-shadow:0 0 1px currentColor,
/*highlight*/
-1px -1px 1px hsl(184,80%,50%),
0 -1px 1px hsl(184,80%,55%),
1px -1px 1px hsl(184,80%,50%),
/*light shadow*/
1px 1px 1px hsl(184,80%,10%),
0 1px 1px hsl(184,80%,10%),
-1px 1px 1px hsl(184,80%,10%),
/*outline*/
-2px -2px 1px hsl(184,80%,15%),
-1px -2px 1px hsl(184,80%,15%),
0 -2px 1px hsl(184,80%,15%),
1px -2px 1px hsl(184,80%,15%),
2px -2px 1px hsl(184,80%,15%),
2px -1px 1px hsl(184,80%,15%),
2px 0 1px hsl(184,80%,15%),
2px 1px 1px hsl(184,80%,15%),
-2px 0 1px hsl(184,80%,15%),
-2px -1px 1px hsl(184,80%,15%),
-2px 1px 1px hsl(184,80%,15%),
/*dark shadow*/
2px 2px 2px hsl(184,80%,5%),
1px 2px 2px hsl(184,80%,5%),
0 2px 2px hsl(184,80%,5%),
-1px 2px 2px hsl(184,80%,5%),
-2px 2px 2px hsl(184,80%,5%)
}

.test{font-weight:bold;color:#000/*FF*/;text-shadow:0 0 1px currentColor,
2px  0   1px #98c0e8,  0   2px  1px #083058,  2px  1px  1px #98c0e8,  1px  2px  1px #083058,  2px  2px  1px #487098,
3px  1px 1px #98c0e8,  1px 3px  1px #083058,  3px  2px  1px #98c0e8,  2px  3px  1px #083058,  3px  3px  1px #487098,
4px  2px 1px #98c0e8,  2px 4px  1px #083058,  4px  3px  1px #98c0e8,  3px  4px  1px #083058,  4px  4px  1px #487098,
5px  3px 1px #98c0e8,  3px 5px  1px #083058,  5px  4px  1px #98c0e8,  4px  5px  1px #083058,  5px  5px  1px #487098,
6px  4px 1px #98c0e8,  4px 6px  1px #083058,  6px  5px  1px #98c0e8,  5px  6px  1px #083058,  6px  6px  1px #487098,
7px  5px 1px #98c0e8,  5px 7px  1px #083058,  7px  6px  1px #98c0e8,  6px  7px  1px #083058,  7px  7px  1px #487098,
8px  6px 1px #98c0e8,  6px 8px  1px #083058,  8px  7px  1px #98c0e8,  7px  8px  1px #083058,  8px  8px  1px #487098,
9px  7px 1px #98c0e8,  7px 9px  1px #083058,  9px  8px  1px #98c0e8,  8px  9px  1px #083058,  9px  9px  1px #487098,
10px 8px 1px #98c0e8,  8px 10px 1px #083058,  10px 9px  1px #98c0e8,  9px  10px 1px #083058,  10px 10px 1px #487098,
11px 9px 1px #98c0e8,  9px 11px 1px #083058,  11px 10px 1px #98c0e8,  10px 11px 1px #083058,  11px 11px 1px #487098,
2px -1px 1px #666,
3px  0   1px #666,
4px  1px 1px #666,
5px  2px 1px #666,
6px  3px 1px #666,
7px  4px 1px #666,
8px  5px 1px #666,
9px  6px 1px #666,
10px 7px 1px #666,
11px 8px 1px #666,
12px 9px 1px #666,
12px 10px 1px #666,
11px 11px 1px #666
}
.test:before,.test:after{content:'Test'}
.test:before{color:rgb(40,80,120);text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000}
.test:after{color:rgba(40,80,120,.1);text-shadow:-1px 0 1px rgba(40,80,120,.8),1px -1px 1px rgba(255,255,255,.8);-webkit-filter:url(#light-top);filter:url(#light-top)}

.bottom{font-weight:bold;color:#EDEDED/*FF*/;text-shadow:0 0 1px currentColor,
0 0 1px currentColor, 2px 0 1px #083058, 0 2px 1px #303030, 2px 1px 1px #083058, 1px 2px 1px #27292A, 2px 2px 1px #252627, 3px 1px 1px #083058, 1px 3px 1px #262728, 3px 2px 1px #083058, 2px 3px 1px #303132, 3px 3px 1px #28292A, 4px 2px 1px #083058, 2px 4px 1px #333434, 4px 3px 1px #083058, 3px 4px 1px #39393A, 4px 4px 1px #202122, 5px 3px 1px #083058, 3px 5px 1px #202020, 5px 4px 1px #083058, 4px 5px 1px #333435, 5px 5px 1px #313335, 6px 4px 1px #083058, 4px 6px 1px #1C1C1D, 6px 5px 1px #083058, 5px 6px 1px #303030, 6px 6px 1px #2D2E2F, 7px 5px 1px #083058, 5px 7px 1px #2A2B2C, 7px 6px 1px #083058, 6px 7px 1px #3E3F41, 7px 7px 1px #292A2C, 8px 6px 1px #083058, 6px 8px 1px #252627, 8px 7px 1px #083058, 7px 8px 1px #212224, 8px 8px 1px #38393A, 9px 7px 1px #083058, 7px 9px 1px #3C3D3D, 9px 8px 1px #083058, 8px 9px 1px #404244, 9px 9px 1px #323334, 10px 8px 1px #083058, 8px 10px 1px #2F3030, 10px 9px 1px #083058, 9px 10px 1px #303132, 10px 10px 1px #323334, 11px 9px 1px #083058, 9px 11px 1px #303132, 11px 10px 1px #083058, 10px 11px 1px #2B2C2D, 11px 11px 1px #3C3E3F, 11px 11px 1px #666, 11px 12px 1px #666, 10px 12px 1px #666, 9px 12px 1px #666, 8px 11px 1px #666, 7px 10px 1px #666, 6px 9px 1px #666, 5px 8px 1px #666, 4px 7px 1px #666, 3px 6px 1px #666, 2px 5px 1px #666, 1px 4px 1px #666, 0 3px 1px #666, -1px 2px 1px #666, 20px 8px 8px rgba(0,0,0,.7)}.bottom:before,.bottom:after{content:''}
.bottom:before{color:rgb(40,80,120);text-shadow:0 0 1px currentColor,-1px -1px 1px #003,0 -1px 1px #003,1px -1px 1px #003,1px 0 1px #003,1px 1px 1px #003,0 1px 1px #003,-1px 1px 1px #003,-1px 0 1px #003}
.bottom:after{color:rgba(40,80,120,.1);text-shadow:1px -1px 1px rgba(40,80,120,.8),-1px 1px 1px rgba(255,255,255,.8)}

.dilate{color:red;text-shadow:0 0 1px currentColor,-1px -1px 1px #300,0 -1px 1px #300,1px -1px 1px #300,1px 0 1px #300,1px 1px 1px #300,0 1px 1px #300,-1px 1px 1px #300,-1px 0 1px #300}
.dilate:before,.dilate:after{content:'Dilate';z-index:-1}
.dilate:before{-webkit-filter:url(#dilate10);filter:url(#dilate10)}
.dilate:after{color:#ddd;-webkit-filter:url(#dilate6);filter:url(#dilate6)}

.erode{color:#369;font-weight:bold;text-shadow:0 0 1px currentColor,1px 1px 1px #000,2px 2px 3px #000}
.erode:after{content:'Erode';color:#fff;text-shadow:0 0 1px #fff;-webkit-filter:url(#erode2);filter:url(#erode2)}

.distant1{color:green;font-weight:bold;text-shadow:0 0 1px currentColor,-1px -1px 1px #030,0 -1px 1px #030,1px -1px 1px #030,1px 0 1px #030,1px 1px 1px #030,0 1px 1px #030,-1px 1px 1px #030,-1px 0 1px #030}
.distant1:after{content:'Distant Light';text-shadow:0 0 1px currentColor;-webkit-filter:url(#distant1);filter:url(#distant1)}

.distant-top{font-weight:bold;color:orange;
text-shadow:0 0 1px currentColor,-1px -1px 1px #030,0 -1px 1px #030,1px -1px 1px #030,1px 0 1px #030,1px 1px 1px #030,0 1px 1px #030,-1px 1px 1px #030,-1px 0 1px #030}
.distant-top:after{content:'Distant Top';text-shadow:0 0 1px currentColor;-webkit-filter:url(#distant-top);filter:url(#distant-top)}

.distant-front{font-size: 14px;font-weight:bold;color:#F0F0F0;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000}
.distant-front:after{content:'';text-shadow:0 0 1px currentColor;-webkit-filter:url(#distant-front);filter:url(#distant-front)}

.diff1{display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/}

.bevel{font-family:cursive;color:rgba(40,80,120,.9);
text-shadow:-1px -1px 1px #000,0 -1px 1px #000,
1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,
0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000,0 0 4px #000}
.bevel,.bevel:after{-webkit-filter:url(#light2);filter:url(#light2)}
.bevel:after{content:"Bevel";text-shadow:none;opacity:1}
/*.darkbg .bevel{text-shadow:-1px -1px 1px #bbb,
0 -1px 1px #bbb,1px -1px 1px #bbb,1px 0 1px #bbb,
1px 1px 1px #bbb,0 1px 1px #bbb,-1px 1px 1px #bbb,
-1px 0 1px #bbb,0 0 4px #bbb}*/